<template>
<div>
  <el-tree
    :data="hostgroups"
    :props="defaultProps"
    show-checkbox
    node-key="id"
    lazy
    highlight-current
    ref="tree"
    :expand-on-click-node="false"
    :render-content="renderContent"
    @node-expand="handleNodeExpand">
  </el-tree>
  <div slot="footer" class="dialog-footer">
    <el-button type="success" @click="importDeviceClick">{{$t('OK')}}</el-button>
    <el-button type="danger" @click="cancleImport">{{$t('Cancel')}}</el-button>
  </div>
</div>
</template>

<script>
import deviceApi from 'api/device'
import com from 'common/resTypeEnum'
import {RES_HOSTGROUP,RES_HOST,RES_GRAPHY} from 'common/resTypeEnum'

  export default {
    data() {
      return {
        hostgroups: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },

    methods: {
      initHostgroups() {
        var self = this;
        deviceApi.listHostgroup().then((response) => {
          self.hostgroups = response.data;
        }).catch((err) =>{
            console.error(err);
        });
      },
      renderContent(h, { node, data, store }) {
        const iconStyle = this.getIconName(data.type, data.name);
        const restype = this.getResTypeName(data.type);
        return (
          <span>
            <i class={iconStyle}></i>
            <span style="margin-right:50px">{node.label}</span>
            <span style="margin-right:50px">{node.host}</span>
            <span style="margin-right:50px">{restype}</span>
          </span>);
      },
      getIconName(restype, restypeName) {
        if (restype == 1) {
          return com.getIconByResTypeName(restypeName);
        } else {
          return com.getIconByResTypeName(restype);
        }
      },
      getResTypeName(restype) {
        return com.getNameByResType(restype);
      },
      handleNodeExpand(rowData, node, nodeComp) {
        node.loading = true;
        const self = this;
        // 判断请求数据类型，调用api
        const dataType = rowData.type;
        const rowId = rowData.id;
        switch (dataType) {
          case RES_HOSTGROUP:
            deviceApi.queryHostByGroupid(rowId).then((response) => {
              rowData.children = response.data;
              node.loading = false;
            }).catch((err) =>{
                console.error(err);
            });
            break;
          // case RES_HOST:
          //   deviceApi.queryGraphByHostid(rowId).then((response) => {
          //     rowData.children = response.data;
          //     node.loading = false;
          //   }).catch((err) =>{
          //       console.error(err);
          //   });
          //   break;
          // case RES_GRAPHY:
          //   deviceApi.queryItemByGraphid(rowId).then((response) => {
          //     rowData.children = response.data;
          //     node.loading = false;
          //   }).catch((err) =>{
          //       console.error(err);
          //   });
          //   break;
          default:
            node.loading = false;
            break;
        }
      },
      importDeviceClick() {
        const checkedNodes = this.$refs.tree.getCheckedNodes();
        console.log('checkedNodes', checkedNodes);
        if ((checkedNodes instanceof Array) && checkedNodes.length > 0) {
          this.$emit('transferCheckedNodes', checkedNodes);
        } else {
          this.$message({
            message: this.$t('Please select'),
            type: 'warning'
          });
        }
      },
      cancleImport() {
        this.$emit('transferCloseDialog', this.$t("Cancel to import"));
      }
    },
    mounted() {
      // this.$store.dispatch('listHostgroup');
      this.initHostgroups();
    },
    // computed: {
    //   hostgroups() {
    //     return this.$store.state.device.hostgroupList;
    //   }
    // }
  };
</script>
